<template>
  <div class="firstinfo">
    <!-- 新增任务页面 -->
    <span class="tit">{{ addTastDto.name }}</span>
    <span
      class="misLV"
      :class="{
        LvOne: addTastDto.priority <= 100,
        LvTwo: (addTastDto.priority <= 200) & (addTastDto.priority > 100),
        LvThree: addTastDto.priority > 200,
      }"
      >LV {{ addTastDto.priority }}</span
    >
    <div class="tags">
      <el-tag
        v-for="item in addTastDto.labelList"
        :key="item.index"
        size="mini"
        type="info"
        >{{ item }}</el-tag
      >
    </div>
    <div class="btns">
      <button class="delmis" @click="goback">取消</button>
      <button class="editmis" @click="addTaskBtn">提交</button>
    </div>
    <div class="infotable">
      <table cellpadding="0" cellspacing="0">
        <tr height="48">
          <td width="20%">
            <span>所属项目：</span>
            <el-select
              size="mini"
              clearable
              v-model="addTastDto.projectid"
              placeholder="请选择所属项目"
              @change="projectClick"
              @clear="projectClearClick"
            >
              <el-option
                v-for="item in porjectNameList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </td>
          <td colspan="2">
            <span>任务名称：</span>
            <input
              type="text"
              maxlength="45"
              v-model="addTastDto.name"
              placeholder="请输入任务名称"
            />
          </td>
          <td width="20%">
            <span>父任务：</span>
            <el-select
              size="mini"
              clearable
              v-model="addTastDto.parentid"
              placeholder="请选择父任务"
            >
              <el-option
                v-for="item in taskNameList"
                :key="item.id"
                :label="item.taskName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </td>
          <td width="20%">
            <div style="display: flex; align-items: center">
              <span>进度及状态：</span>
              <div class="domany">
                <el-progress
                  size="mini"
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="0"
                  status="exception"
                ></el-progress>
              </div>
              <span class="manystatus">未开始</span>
            </div>
          </td>
        </tr>
        <tr height="120">
          <td>
            <div class="missioner">
              <span>任务负责人:</span>
              <div v-if="isAdmin">
                <el-select
                  v-if="selectAllRoleName[0] !== null"
                  class="missionerSelect"
                  clearable
                  value-key="roleId"
                  change="changeValue"
                  v-model="addTastDto.chargeRoleid"
                  placeholder="请选择负责人角色"
                >
                  <el-option
                    v-for="item in selectAllRoleName"
                    :key="item.roleId"
                    :label="item.roleName"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-else
                  class="missionerSelect"
                  clearable
                  v-model="addTastDto.chargeRoleid"
                  placeholder="请选择负责人角色"
                >
                  <el-option
                    v-for="(item, index) in []"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="missionerinfo" v-if="chargeRoleNameList.length !== 0">
                <div
                  v-for="item in chargeRoleNameList.slice(0, 1)"
                  :key="item.id"
                >
                  <div v-if="item.roleName">
                    <p v-if="item.roleName.length === 1">
                      {{ item.roleName[0].roleName }}
                    </p>
                    <p v-else-if="item.roleName.length > 1">多角色</p>
                    <p v-else style="height: 16px; width: 2px"></p>
                  </div>
                  <img v-if="item.userUrl" :src="item.userUrl" alt="" />
                  <p>{{ item.userName }}</p>
                </div>
              </div>
              <img
                class="choosemember"
                @click="chooseMissionerClick"
                src="@/assets/missionerplus.png"
                alt=""
              />
              <el-dialog
                :visible.sync="chooseMissioner"
                :show-close="false"
                top="20px"
                center
              >
                <div class="diaheader">请选择任务负责人</div>
                <div class="diacontentbox">
                  <div>
                    <p style="font-size: 16px; color: #222">已选任务负责人</p>
                    <div class="hadchoosenmembers">
                      <div v-if="chargeRoleNameList.length === 0">暂无人员</div>
                      <div
                        v-else
                        v-for="item in chargeRoleNameList.slice(0, 1)"
                        :key="item.id"
                      >
                        <div class="choosenmem" slot="reference">
                          <i
                            class="el-icon-close closeBox"
                            @click="delFzr(item)"
                          ></i>
                          <div v-if="item.roleName">
                            <p v-if="item.roleName.length !== 0">
                              {{ item.roleName[0].roleName }}
                            </p>
                            <p v-else style="height: 16px; width: 2px"></p>
                          </div>
                          <img v-if="item.userUrl" :src="item.userUrl" alt="" />
                          <p style="color: #222">
                            {{ item.userName }}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="searchbox">
                    <p style="font-size: 16px; color: #222">人员列表</p>
                    <div class="inputborder">
                      <input
                        type="text"
                        placeholder="搜索成员"
                        v-model="searchName1"
                        class="search"
                        title="sous"
                        style="border-radius: 25px"
                        @keydown.enter="searchEnterFun1"
                      />
                      <i
                        class="el-icon-search icon"
                        title="搜索"
                        @click="searchEvent1"
                      ></i>
                    </div>
                  </div>
                  <div class="diacontent" style="text-align: left">
                    <ul>
                      <li
                        v-for="item in roleNameList1"
                        @click="clickInput"
                        :key="item.userId"
                      >
                        <img v-if="item.userUrl" :src="item.userUrl" alt="" />
                        <span class="memberName">{{ item.userName }}</span>
                        <div class="firstBox">
                          <div
                            class="first"
                            v-for="roleItem in item.roleName"
                            :key="roleItem.roleId"
                          >
                            {{ roleItem.roleName }}
                          </div>
                        </div>
                        <input
                          class="checkBoxs"
                          name="charge"
                          v-model="item.checked"
                          type="radio"
                          @click="inputClickEvent1($event)"
                          @change="getboxValue($event, item)"
                        />
                      </li>
                    </ul>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="onClose1">取 消</el-button>
                  <el-button type="primary" @click="btnOk1">确 定</el-button>
                </span>
              </el-dialog>
            </div>
          </td>
          <td colspan="2">
            <div class="missioner">
              <span>任务成员：</span>
              <div v-if="isAdmin">
                <el-select
                  v-if="selectAllRoleName[0] !== null"
                  class="missionerSelect"
                  v-model="value11"
                  multiple
                  clearable
                  value-key="roleId"
                  change="changeValue"
                  placeholder="请选择成员角色"
                  @change="selectChange($event)"
                >
                  <el-option
                    v-for="item in selectAllRoleName"
                    :key="item.roleId"
                    :label="item.roleName"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-else
                  class="missionerSelect"
                  v-model="value11"
                  placeholder="请选择成员角色"
                  @change="selectChange($event)"
                >
                  <el-option
                    v-for="(item, index) in []"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>
              <div
                v-if="hadmembers.length !== 0"
                class="diacontentbox diacontentbox1"
              >
                <div class="hadchoosenmembers" v-if="hadmembers.length !== 0">
                  <div v-for="item in hadmembers.slice(0, 6)" :key="item.id">
                    <div class="choosenmem" slot="reference">
                      <div v-if="item.roleName">
                        <p v-if="item.roleName.length === 1">
                          {{ item.roleName[0].roleName }}
                        </p>
                        <p v-else-if="item.roleName.length > 1">多角色</p>
                      </div>
                      <p v-else style="height: 16px; width: 2px"></p>
                      <img v-if="item.userUrl" :src="item.userUrl" alt="" />
                      <p style="color: #222">{{ item.userName }}</p>
                    </div>
                  </div>
                  <div
                    v-if="hadmembers.length > 6"
                    class="moremissioner moremissioner1"
                  >
                    <span>等{{ hadmembers.length }}人</span>
                  </div>
                </div>
              </div>
              <img
                class="choosemember"
                @click="choosemembersClick"
                src="@/assets/missionerplus.png"
                alt=""
              />
              <el-dialog
                :visible.sync="choosemembers"
                :show-close="false"
                top="20px"
                center
              >
                <div class="diaheader">请选择任务成员</div>
                <div class="diacontentbox">
                  <div>
                    <p style="font-size: 16px; color: #222">已选任务成员</p>
                    <div class="hadchoosenmembers">
                      <div v-if="hadmembers.length === 0">暂无人员</div>
                      <div
                        v-else
                        v-for="item in hadmembers.slice(0, 10)"
                        :key="item.id"
                      >
                        <div class="choosenmem" slot="reference">
                          <i
                            class="el-icon-close closeBox"
                            @click="delRwcy(item)"
                          ></i>
                          <div v-if="item.roleName">
                            <p v-if="item.roleName.length !== 0">
                              {{ item.roleName[0].roleName }}
                            </p>
                            <p v-else></p>
                          </div>
                          <img v-if="item.userUrl" :src="item.userUrl" alt="" />
                          <p style="color: #222">{{ item.userName }}</p>
                        </div>
                      </div>
                      <div
                        v-if="hadmembers.length > 10"
                        class="moremissioner moremissioner1"
                      >
                        <span>等{{ hadmembers.length }}人</span>
                      </div>
                    </div>
                  </div>
                  <div class="searchbox">
                    <p style="font-size: 16px; color: #222">人员列表</p>
                    <div class="inputborder">
                      <input
                        type="text"
                        placeholder="搜索成员"
                        v-model="searchName2"
                        class="search"
                        style="border-radius: 25px"
                        @keydown.enter="searchEnterFun2"
                      />
                      <i
                        class="el-icon-search icon"
                        title="搜索"
                        @click="searchEvent2"
                      ></i>
                    </div>
                  </div>
                  <div class="diacontent" style="text-align: left">
                    <ul>
                      <li
                        v-for="item in roleNameList2"
                        @click="clickInput"
                        :key="item.userId"
                      >
                        <img v-if="item.userUrl" :src="item.userUrl" alt="" />
                        <span class="memberName">{{ item.userName }}</span>
                        <div class="firstBox">
                          <div
                            class="first"
                            v-for="roleItem in item.roleName"
                            :key="roleItem.roleId"
                          >
                            {{ roleItem.roleName }}
                          </div>
                        </div>
                        <input
                          class="checkBoxs"
                          name="charge"
                          v-model="item.checked"
                          type="checkbox"
                          @click="inputClickEvent($event)"
                          @change="getboxValue1($event, item)"
                        />
                      </li>
                    </ul>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="onClose2">取 消</el-button>
                  <el-button type="primary" @click="btnOk2">确 定</el-button>
                </span>
              </el-dialog>
            </div>
          </td>
          <td>
            <div class="missioner">
              <span>审核人：</span>
              <span>
                <p
                  v-for="item in reviewerNameList.slice(0, 5)"
                  :key="item.userId"
                >
                  {{ item.userName }}
                </p>
              </span>
              <img
                class="choosemember"
                @click="chooseMissioner1Click"
                src="@/assets/missionerplus.png"
                alt=""
              />
            </div>
            <el-dialog
              :visible.sync="chooseMissioner1"
              :show-close="false"
              top="20px"
              center
            >
              <div class="diaheader">请选择审核人</div>
              <div class="diacontentbox">
                <div>
                  <p style="font-size: 16px; color: #222">已选任务审核人</p>
                  <div class="hadchoosenmembers">
                    <div v-if="reviewerNameList.length === 0">暂无人员</div>
                    <div
                      v-else
                      v-for="item in reviewerNameList.slice(0, 5)"
                      :key="item.id"
                    >
                      <div class="choosenmem" slot="reference">
                        <i
                          class="el-icon-close closeBox"
                          @click="delShr(item)"
                        ></i>
                        <div v-if="item.roleName">
                          <p v-if="item.roleName.length !== 0">
                            {{ item.roleName[0].roleName }}
                          </p>
                          <p v-else></p>
                        </div>
                        <img v-if="item.userUrl" :src="item.userUrl" alt="" />
                        <p style="color: #222">{{ item.userName }}</p>
                      </div>
                    </div>
                    <div
                      v-if="reviewerNameList.length > 5"
                      class="moremissioner moremissioner1"
                    >
                      <span>等{{ reviewerNameList.length }}人</span>
                    </div>
                  </div>
                </div>
                <div class="searchbox">
                  <p style="font-size: 16px; color: #222">人员列表</p>
                  <div class="inputborder">
                    <input
                      type="text"
                      placeholder="搜索成员"
                      v-model="searchName3"
                      class="search"
                      style="border-radius: 25px"
                      @keydown.enter="searchEnterFun3"
                    />
                    <i
                      class="el-icon-search icon"
                      title="搜索"
                      @click="searchEvent3"
                    ></i>
                  </div>
                </div>
                <div class="diacontent" style="text-align: left">
                  <ul>
                    <li
                      v-for="item in roleNameList3"
                      @click="clickInput"
                      :key="item.userId"
                    >
                      <img v-if="item.userUrl" :src="item.userUrl" alt="" />
                      <span class="memberName">{{ item.userName }}</span>
                      <div class="firstBox">
                        <div
                          class="first"
                          v-for="roleItem in item.roleName"
                          :key="roleItem.roleId"
                        >
                          {{ roleItem.roleName }}
                        </div>
                      </div>
                      <input
                        class="checkBoxs"
                        name="charge"
                        v-model="item.checked"
                        type="checkbox"
                        @click="inputClickEvent($event)"
                        @change="getboxValue2($event, item)"
                      />
                    </li>
                  </ul>
                </div>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="onClose3">取 消</el-button>
                <el-button type="primary" @click="btnOk3">确 定</el-button>
              </span>
            </el-dialog>
          </td>
          <td>
            <div class="missioner">
              <span>抄送人：</span>
              <span>
                <p v-for="item in CCNameList.slice(0, 5)" :key="item.userId">
                  {{ item.userName }}
                </p>
              </span>
              <img
                class="choosemember"
                @click="chooseMissioner2Click"
                src="@/assets/missionerplus.png"
                alt=""
              />
            </div>
            <el-dialog
              :visible.sync="chooseMissioner2"
              :show-close="false"
              top="20px"
              center
            >
              <div class="diaheader">请选择抄送人</div>
              <div class="diacontentbox">
                <div>
                  <p style="font-size: 16px; color: #222">已选任务抄送人</p>
                  <div class="hadchoosenmembers">
                    <div v-if="CCNameList.length === 0">暂无人员</div>
                    <div v-else v-for="item in CCNameList" :key="item.userId">
                      <div class="choosenmem" slot="reference">
                        <i
                          class="el-icon-close closeBox"
                          @click="delCsr(item)"
                        ></i>
                        <div v-if="item.roleName">
                          <p v-if="item.roleName.length !== 0">
                            {{ item.roleName[0].roleName }}
                          </p>
                          <p v-else></p>
                        </div>
                        <img v-if="item.userUrl" :src="item.userUrl" alt="" />
                        <p style="color: #222">{{ item.userName }}</p>
                      </div>
                    </div>
                    <!-- <div
                      v-if="CCNameList.length > 5"
                      class="moremissioner moremissioner1"
                    >
                      <span>等{{ CCNameList.length }}人</span>
                    </div> -->
                  </div>
                </div>
                <div class="searchbox">
                  <p style="font-size: 16px; color: #222">人员列表</p>
                  <div class="inputborder">
                    <input
                      type="text"
                      placeholder="搜索成员"
                      v-model="searchName4"
                      class="search"
                      style="border-radius: 25px"
                      @keydown.enter="searchEnterFun4"
                    />
                    <i
                      class="el-icon-search icon"
                      title="搜索"
                      @click="searchEvent4"
                    ></i>
                  </div>
                </div>
                <div class="diacontent" style="text-align: left">
                  <ul>
                    <li
                      v-for="item in roleNameList4"
                      @click="clickInput"
                      :key="item.userId"
                    >
                      <img v-if="item.userUrl" :src="item.userUrl" alt="" />
                      <span class="memberName">{{ item.userName }}</span>
                      <div class="firstBox">
                        <div
                          class="first"
                          v-for="roleItem in item.roleName"
                          :key="roleItem.roleId"
                        >
                          {{ roleItem.roleName }}
                        </div>
                      </div>
                      <input
                        class="checkBoxs"
                        name="charge"
                        v-model="item.checked"
                        type="checkbox"
                        @click="inputClickEvent($event)"
                        @change="getboxValue3($event, item)"
                      />
                    </li>
                  </ul>
                </div>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="onClose4">取 消</el-button>
                <el-button type="primary" @click="btnOk4">确 定</el-button>
              </span>
            </el-dialog>
          </td>
        </tr>
        <tr height="48">
          <td>
            <span>预计工时：</span>
            <input
              id="nameInput"
              v-model="addTastDto.planhours"
              type="text"
              maxlength="4"
              placeholder="请输入预计工时"
            />
          </td>
          <td colspan="2">
            <span>计划开始时间：</span>
            <span>
              <el-date-picker
                size="mini"
                v-model="addTastDto.startdate"
                align="right"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择计划开始日期"
              >
              </el-date-picker>
            </span>
          </td>
          <td>
            <span>计划结束时间：</span>
            <span>
              <el-date-picker
                size="mini"
                v-model="addTastDto.enddate"
                align="right"
                value-format="yyyy-MM-dd"
                type="date"
                @change="pickerChange"
                placeholder="选择计划结束日期"
              >
              </el-date-picker>
            </span>
          </td>
          <td>
            <span>过期：</span>
            <span>正常</span>
          </td>
        </tr>
        <tr height="48" v-if="projectType === 2 && isAdmin">
          <td>
            <span>类型：</span>
            <el-select
              size="mini"
              v-model="addTastDto.type"
              placeholder="请选择需求类型"
            >
              <el-option
                v-for="item in xuqies"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </td>
          <td colspan="2">
            <span>功能模块：</span>
            <span>
              <el-select
                v-model="addTastDto.projectmoduleid"
                size="mini"
                clearable
                placeholder="请选择功能模块"
              >
                <el-option
                  v-for="item in moduleNameList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </span>
          </td>
          <td colspan="2">
            <span>版本迭代：</span>
            <span>
              <el-select
                size="mini"
                clearable
                v-model="addTastDto.projectiterationid"
                placeholder="请选择版本名称"
              >
                <el-option
                  v-for="item in iterationList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </span>
          </td>
        </tr>
        <tr height="48" v-if="isAdmin">
          <td>
            <span>任务编号：</span>
            <span></span>
          </td>
          <td>
            <span>创建人：</span>
            <span class="choosemember choosemember1">{{ userName }}</span>
          </td>
          <td>
            <span>任务等级：</span>
            <input
              id="miscodeInput"
              v-model="addTastDto.priority"
              oninput="if(value.length>5)value=value.slice(0,5);if(value>300)value=300;if(value<0)value=0;"
              min="0"
              max="300"
              type="Number"
              @blur="inputBlur"
              placeholder="请输入任务等级"
            />
          </td>
          <td>
            <div class="tagChangeBox">
              <span>任务标签：</span>
              <el-select
                v-model="addTastDto.labelList"
                multiple
                filterable
                allow-create
                popper-class="tagChangeBox1"
                default-first-option
                placeholder="请输入任务标签"
              >
              </el-select>
            </div>
          </td>

          <td>
            <span>评分表：</span>
            <span v-if="evaluationName">{{ evaluationName.name }}</span>
          </td>
        </tr>
        <tr height="48" v-if="isAdmin">
          <td colspan="3">
            <span>审核人问卷：</span>
            <el-switch
              style="display: inline-block; height: 45%; margin-left: 10px"
              v-model="score1"
              active-text="是"
              inactive-text="否"
              @change="switchClick"
            >
            </el-switch>
          </td>
          <td colspan="2">
            <span>执行人问卷：</span>
            <el-switch
              style="display: inline-block; height: 45%; margin-left: 10px"
              v-model="score"
              active-text="是"
              inactive-text="否"
              @change="switchClick1"
            >
            </el-switch>
          </td>
        </tr>
      </table>
    </div>
    <!-- <div class="common-intro">
      <div class="discreaption">
        <p class="distit">任务简介</p>
        <el-input
          maxlength="200"
          type="textarea"
          show-word-limit
          class="disbox"
          v-model="addTastDto.description"
          placeholder="请输入任务简介"
        />
      </div>
    </div> -->
  </div>
</template>

<script>
import { getProjectName, getTaskByprojectIdList, getAllTaskName, getSelectRoleName, getIteration, getModuleName, getSelectAllRoleName, addTask, getEvaluationName, getSelectLabel, getSelectProjectType } from '@/api/task/task.js';
export default {
  name: 'first-info',
  inject: ['reload'],
  components: {
  },
  data() {
    return {
      xuqies: [ // 类型
        {
          value: 1,
          name: '任务'
        },
        {
          value: 2,
          name: '需求'
        },
        {
          value: 3,
          name: '缺陷'
        },
        {
          value: 4,
          name: '测试'
        }
      ],
      chargeRoleNameList: [], // 已选负责人
      hadmembers: [], // 已选成员角色列表
      reviewerNameList: [], // 已选审核人
      CCNameList: [], // 已选抄送人
      chooseMissioner: false,
      choosemembers: false,
      chooseMissioner1: false, // 弹出控制
      chooseMissioner2: false,
      porjectNameList: [], // 项目名字
      taskNameList: [], // 任务名字
      iterationList: [], // 项目迭代名称
      evaluationName: {}, // 评分表名称
      roleNamedata: {
        projectId: null, // 项目id
        userId: parseInt(sessionStorage.getItem('userid')), // 当前登录人ID
        userName: ''
      },
      roleNameList1: [], // 负责人用户名字和角色名字列表
      roleNameList2: [], // 任务成员用户名字和角色名字列表
      roleNameList3: [], // 审核人用户名字和角色名字列表
      roleNameList4: [], // 抄送人用户名字和角色名字列表
      moduleNameList: [], // 项目模块名称
      selectAllRoleName: [], // 所有角色
      selectLabelList: [], // 所有标签
      projectType: null, // 项目类型
      userName: sessionStorage.getItem('username'),

      addTastDto: { // 请求数据
        chargeRoleid: {
          roleId: 0,
          roleName: ''
        }, // 负责人角色id-必填
        chargeid: null, // 负责人id-必填
        chargeidProjectUserId: null, // 负责人在项目中的userID
        checkedidList: [], // 审核角色idList
        copyidList: [], // 抄送角色idList
        enddate: '', // 结束时间
        fileIdList: [], // 附件ID列表
        isevaluation: 2, // 执行人问卷是否评分1是2否
        isevaluationon: 2, // 审核人问卷是否评分1是2否
        lableId: [], // 标签
        labelList: [], // 标签列表
        memo: '', // 备注
        name: '', // 名称-必填
        ordernum: null, // 同级任务顺序号
        parentid: this.$route.params.parentid ? this.$route.params.parentid : null, // 父任务
        performidList: { // 执行角色idList
          roleIdList: [], // 角色列表
          userIdList: [] // 人员列表
        },
        phase: 1, // 敏捷阶段
        planhours: null, // 预计工时-必填
        priority: null, // 任务等级-必填
        // projectUserId: null,
        projectid: this.$route.params.projectid ? this.$route.params.projectid : null, // 所属项目
        projectiterationid: null, // 项目迭代id
        projectmoduleid: null, // 功能模块id
        score: null, // 任务分
        startdate: '', // 开始时间
        type: 1, // 任务类型-必填
        userid: parseInt(sessionStorage.getItem('userid')) // 创建人id-必填
      },
      userId: parseInt(sessionStorage.getItem('userid')), // 用户ID
      score1: false, // 审核人问卷
      score: false, // 执行人问卷
      value11: [], // 任务成员角色
      labelList: [], // 标签列表
      isAdmin: false, // 是否是管理员
      usertype: parseInt(sessionStorage.getItem('usertype')), // 当前用户属性

      // ------------------------------------

      searchName1: '', // 搜索数据
      searchName2: '', // 搜索数据
      searchName3: '', // 搜索数据
      searchName4: '' // 搜索数据
    };
  },
  created() {
    this.projectAddTask();
    this.getIsStatus();
    this.getProjectNameList();
    this.getSelectAllRoleName();
    this.getSelectLabel();
  },
  mounted() { },
  methods: {
    // 审核人问卷点击事件
    switchClick() {
      // console.log(this.score1);
      if (this.score1 === true) {
        this.addTastDto.isevaluation = 1;
      } else {
        this.addTastDto.isevaluation = 2;
      }
    },
    // 执行人问卷点击事件
    switchClick1() {
      if (this.score === true) {
        this.addTastDto.isevaluationon = 1;
      } else {
        this.addTastDto.isevaluationon = 2;
      }
    },
    // 初始化项目需求看板新增任务
    async projectAddTask() {
      if (this.addTastDto.projectid !== null) {
        this.getEvaluationName(this.addTastDto.projectid);
        this.getAllTaskNameList(parseInt(this.addTastDto.projectid));
        this.getIteration(parseInt(this.addTastDto.projectid));
        this.getModuleNameList(parseInt(this.addTastDto.projectid));
        this.getSelectAllRoleName(this.addTastDto.projectid);
        // console.log(this.addTastDto.projectid);
        const {data} = await getSelectProjectType({projectId: this.addTastDto.projectid});
        this.projectType = data;
      }
    },
    // 判断是否是管理员
    getIsStatus() {
      if (parseInt(sessionStorage.getItem('usertype')) === 1) {
        this.isAdmin = true;
      } else {
        this.isAdmin = false;
      }
    },
    // 任务等级事件
    inputBlur() {
      if (this.addTastDto.priority > 300 || this.addTastDto.priority < 1) {
        return this.$message({
          showClose: true,
          message: '任务等级范围在1~~300！',
          type: 'warning'
        });
      }
    },
    // 标签事件
    selectChangeLabel() {
      if (this.addTastDto.lableId.length !== 0) {
        this.addTastDto.lableId = [];
      }
      this.labelList.forEach(item => {
        this.addTastDto.lableId.push(item.labelId);
      });
    },
    // 任务负责人列表
    async chooseMissionerClick() {
      this.roleNamedata = {
        projectId: this.addTastDto.projectid, // 项目id
        userId: parseInt(sessionStorage.getItem('userid')) // 当前登录人ID
      };
      const { data } = await getSelectRoleName(this.roleNamedata);
      this.roleNameList1 = data;
      this.chooseMissioner = true;
      // console.log(this.roleNameList1);
    },
    // 负责人删除事件
    async delFzr(i) {
      // console.log(i);
      i.checked = false;
      this.chargeRoleNameList = [];
      this.roleNameList1 = null;
      const {data} = await getSelectRoleName(this.roleNamedata);
      // console.log(data);
      this.roleNameList1 = data;
    },
    // 负责人搜索事件
    async searchEvent1() {
      // console.log(this.searchName1);
      this.roleNamedata.userName = this.searchName1;
      const {data} = await getSelectRoleName(this.roleNamedata);
      // console.log(data);
      this.roleNameList1 = data;
    },
    // 负责人角色搜索回车事件
    searchEnterFun1() {
      this.searchEvent1();
    },
    // 负责人弹层取消
    onClose1() {
      this.searchName1 = '';
      if (this.chargeRoleNameList.length !== 0) {
        this.chargeRoleNameList[0].checked = false;
        this.chargeRoleNameList.splice(0, 1);
      }
      this.chooseMissioner = false;
    },
    // 负责人弹层确定
    btnOk1() {
      this.searchName1 = '';
      if (this.chargeRoleNameList.length > 0) {
        this.addTastDto.chargeid = this.chargeRoleNameList[0].userId;
        if (this.addTastDto.projectid) {
          this.addTastDto.chargeidProjectUserId = this.roleNameList1[0].projectuserId;
        } else {
          this.addTastDto.chargeidProjectUserId = this.roleNameList1[0].projectuserId;
        }
      } else {
        this.addTastDto.chargeid = null;
      }
      this.chooseMissioner = false;
    },
    // 已选负责人添加
    getboxValue(e, item) {
      if (this.chargeRoleNameList.length === 0) {
        item.checked = true;
        this.chargeRoleNameList.push(item);
      } else {
        item.checked = false;
        this.chargeRoleNameList.splice(0, 1);
        item.checked = true;
        this.chargeRoleNameList.push(item);
      }
      this.changed = true;
    },
    inputClickEvent1(e, item) {
      e.stopPropagation();
      let _this = this;
      window.setTimeout(() => {
        if (!this.changed) {
          e.target.checked = false;
          // 可以写些单选框没有选中的代码处理
          this.chargeRoleNameList = [];
        }
        _this.changed = false;
      }, 0);
    },
    // 获取任务成员当前项目用户名字和角色名字列表
    async choosemembersClick() {
      // const arr = [];
      this.roleNamedata = {
        projectId: this.addTastDto.projectid, // 项目id
        userId: parseInt(sessionStorage.getItem('userid')) // 当前登录人ID
      };
      const { data } = await getSelectRoleName(this.roleNamedata);
      this.roleNameList2 = data;
      for (let i = 0; i < this.hadmembers.length; i++) {
        for (let j = 0; j < this.roleNameList2.length; j++) {
          if (this.hadmembers[i].userId === this.roleNameList2[j].userId) {
            this.roleNameList2[j].checked = true;
          }
        }
      }
      this.choosemembers = true;
    },
    // 任务成员角色change事件
    selectChange(e) {
      this.addTastDto.performidList.roleIdList = e;
      // console.log(e);
    },
    // 任务成员删除事件
    delRwcy(i) {
      // console.log(i);
      i.changed = false;
      let index = this.hadmembers.findIndex(item => item.userId === i.userId);
      // console.log(index);
      this.hadmembers.splice(index, 1);
      // console.log(this.hadmembers);
      this.choosemembersClick();
    },
    // 任务成员角色搜索事件
    async searchEvent2() {
      // console.log(this.searchName1);
      this.roleNamedata.userName = this.searchName2;
      const {data} = await getSelectRoleName(this.roleNamedata);
      // console.log(data);
      this.roleNameList2 = data;
      for (let i = 0; i < this.hadmembers.length; i++) {
        for (let j = 0; j < this.roleNameList2.length; j++) {
          if (this.hadmembers[i].userId === this.roleNameList2[j].userId) {
            this.roleNameList2[j].checked = true;
          }
        }
      }
    },
    // 任务成员角色搜索回车事件
    searchEnterFun2() {
      this.searchEvent2();
    },
    // 任务成员弹层取消
    onClose2() {
      this.hadmembers = [];
      this.searchName2 = '';
      this.choosemembers = false;
    },
    // 任务成员弹层确定
    btnOk2() {
      if (this.addTastDto.performidList.userIdList.length !== 0) {
        this.addTastDto.performidList.userIdList = [];
      }
      this.searchName2 = '';
      // console.log(this.hadmembers);
      // this.hadmembers.forEach(item => {
      //   this.addTastDto.performidList.userIdList.push(item.userId);
      // });
      // if (this.addTastDto.projectid) {
      //   this.addTastDto.projectUserId = this.roleNameList2[0].projectuserId;
      // }
      if (this.addTastDto.projectid) {
        this.addTastDto.performidList.userIdList = this.hadmembers.map((item, index) => {
          return Object.assign({}, {'projectUserId': item.projectuserId, 'userId': item.userId});
        });
      } else {
        this.addTastDto.performidList.userIdList = this.hadmembers.map((item, index) => {
          return Object.assign({}, {'projectUserId': item.projectuserId ? item.projectuserId : item.projectUserId, 'userId': item.userId});
        });
      }
      this.choosemembers = false;
      // console.log(this.addTastDto.performidList);
    },
    // 已选成员添加
    getboxValue1(e, item) {
      if (e.target.checked) {
        item.checked = true;
        this.hadmembers.push(item);
      } else {
        for (let i = 0; i < this.hadmembers.length; i++) {
          if (this.hadmembers[i].userId === item.userId) {
            this.hadmembers[i].checked = false;
            this.hadmembers.splice(i, 1);
            break;
          }
        }
      }
      // console.log(this.hadmembers);
    },
    // 获取审核人当前项目用户名字和角色名字列表
    async chooseMissioner1Click() {
      this.roleNamedata = {
        projectId: this.addTastDto.projectid, // 项目id
        userId: parseInt(sessionStorage.getItem('userid')) // 当前登录人ID
      };
      const { data } = await getSelectRoleName(this.roleNamedata);
      this.roleNameList3 = data;
      for (let i = 0; i < this.reviewerNameList.length; i++) {
        for (let j = 0; j < this.roleNameList3.length; j++) {
          if (this.reviewerNameList[i].userId === this.roleNameList3[j].userId) {
            this.roleNameList3[j].checked = true;
          }
        }
      }
      this.chooseMissioner1 = true;
    },
    // 审核人删除事件
    delShr(i) {
      // console.log(i);
      i.changed = false;
      let index = this.reviewerNameList.findIndex(item => item.userId === i.userId);
      // console.log(index);
      this.reviewerNameList.splice(index, 1);
      // console.log(this.hadmembers);
      this.chooseMissioner1Click();
    },
    // 审核人角色搜索事件
    async searchEvent3() {
      // console.log(this.searchName1);
      this.roleNamedata.userName = this.searchName3;
      const {data} = await getSelectRoleName(this.roleNamedata);
      // console.log(data);
      this.roleNameList3 = data;
      for (let i = 0; i < this.reviewerNameList.length; i++) {
        for (let j = 0; j < this.roleNameList3.length; j++) {
          if (this.reviewerNameList[i].userId === this.roleNameList3[j].userId) {
            this.roleNameList3[j].checked = true;
          }
        }
      }
    },
    // 审核人角色搜索回车事件
    searchEnterFun3() {
      this.searchEvent3();
    },
    // 审核人弹层取消
    onClose3() {
      this.searchName3 = '';
      this.reviewerNameList = [];
      this.chooseMissioner1 = false;
    },
    // 审核人弹层确定
    btnOk3() {
      this.searchName3 = '';
      if (this.addTastDto.checkedidList.length !== 0) {
        this.addTastDto.checkedidList = [];
      }
      // console.log(this.reviewerNameList);
      // this.reviewerNameList.forEach(item => {
      //   this.addTastDto.checkedidList.push(item.userId);
      // });
      if (this.addTastDto.projectid) {
        this.addTastDto.checkedidList = this.reviewerNameList.map((item, index) => {
          return Object.assign({}, {'projectUserId': item.projectuserId, 'userId': item.userId});
        });
      } else {
        this.addTastDto.checkedidList = this.reviewerNameList.map((item, index) => {
          return Object.assign({}, {'projectUserId': item.projectuserId, 'userId': item.userId});
        });
      }
      // console.log(this.addTastDto.checkedidList);
      this.chooseMissioner1 = false;
    },
    // 已选审核人添加
    getboxValue2(e, item) {
      if (e.target.checked) {
        if (this.reviewerNameList.length > 4) {
          item.checked = false;
          e.target.checked = false;
          return this.$message({
            showClose: true,
            message: '审核人最多只能选择5人！',
            type: 'warning'
          });
        }
        item.checked = true;
        this.reviewerNameList.push(item);
      } else {
        for (let i = 0; i < this.reviewerNameList.length; i++) {
          if (this.reviewerNameList[i].userId === item.userId) {
            this.reviewerNameList[i].checked = false;
            this.reviewerNameList.splice(i, 1);
            break;
          }
        }
      }
    },
    // 获取抄送人当前项目用户名字和角色名字列表
    async chooseMissioner2Click() {
      this.roleNamedata = {
        projectId: this.addTastDto.projectid, // 项目id
        userId: parseInt(sessionStorage.getItem('userid')) // 当前登录人ID
      };
      // console.log(this.roleNamedata);
      const { data } = await getSelectRoleName(this.roleNamedata);
      this.roleNameList4 = data;
      for (let i = 0; i < this.CCNameList.length; i++) {
        for (let j = 0; j < this.roleNameList4.length; j++) {
          if (this.CCNameList[i].userId === this.roleNameList4[j].userId) {
            this.roleNameList4[j].checked = true;
          }
        }
      }
      this.chooseMissioner2 = true;
    },
    // 抄送人删除事件
    delCsr(i) {
      // console.log(i);
      i.changed = false;
      let index = this.CCNameList.findIndex(item => item.userId === i.userId);
      // console.log(index);
      this.CCNameList.splice(index, 1);
      // console.log(this.hadmembers);
      this.chooseMissioner2Click();
    },
    // 抄送人角色搜索事件
    async searchEvent4() {
      // console.log(this.searchName1);
      this.roleNamedata.userName = this.searchName4;
      const {data} = await getSelectRoleName(this.roleNamedata);
      // console.log(data);
      this.roleNameList4 = data;
      for (let i = 0; i < this.CCNameList.length; i++) {
        for (let j = 0; j < this.roleNameList4.length; j++) {
          if (this.CCNameList[i].userId === this.roleNameList4[j].userId) {
            this.roleNameList4[j].checked = true;
          }
        }
      }
    },
    // 抄送人角色搜索回车事件
    searchEnterFun4() {
      this.searchEvent4();
    },
    // 抄送人弹层取消
    onClose4() {
      this.searchName4 = '';
      this.CCNameList = [];
      this.chooseMissioner2 = false;
    },
    // 抄送人弹层确定
    btnOk4() {
      this.searchName4 = '';
      if (this.addTastDto.copyidList.length !== 0) {
        this.addTastDto.copyidList = [];
      }
      // this.CCNameList.forEach(item => {
      //   this.addTastDto.copyidList.push(item.userId);
      // });
      // console.log('111');
      if (this.addTastDto.projectid) {
        this.addTastDto.copyidList = this.CCNameList.map((item, index) => {
          return Object.assign({}, {'projectUserId': item.projectuserId, 'userId': item.userId});
        });
      } else {
        this.addTastDto.copyidList = this.CCNameList.map((item, index) => {
          return Object.assign({}, {'projectUserId': item.projectuserId, 'userId': item.userId});
        });
      }
      this.chooseMissioner2 = false;
    },
    // 已选抄送人添加
    getboxValue3(e, item) {
      if (e.target.checked) {
        if (this.CCNameList.length > 4) {
          item.checked = false;
          e.target.checked = false;
          return this.$message({
            showClose: true,
            message: '抄送人最多只能选择5人！',
            type: 'warning'
          });
        }
        item.checked = true;
        this.CCNameList.push(item);
      } else {
        for (let i = 0; i < this.CCNameList.length; i++) {
          if (this.CCNameList[i].userId === item.userId) {
            this.CCNameList[i].checked = false;
            this.CCNameList.splice(i, 1);
            break;
          }
        }
      }
      // console.log(this.CCNameList);
    },
    // 获取当前项目的所以角色
    async getSelectAllRoleName() {
      const { data } = await getSelectAllRoleName({ projectId: this.addTastDto.projectid });
      this.selectAllRoleName = data;
      if (this.addTastDto.projectid === null) {
        this.selectAllRoleName = [];
      }
      // console.log(this.selectAllRoleName);
    },
    // 获取项目名称
    async getProjectNameList() {
      if (this.usertype === 1) {
        const { data } = await getProjectName();
        this.porjectNameList = data;
      } else {
        const { data: data1 } = await getTaskByprojectIdList({userId: this.userId});
        // console.log(data1);
        this.porjectNameList = data1;
      }
    },
    // 获取当前项目所有任务名称
    async getAllTaskNameList(id) {
      const { data } = await getAllTaskName({ projectId: id });
      this.taskNameList = data;
      if (this.addTastDto.projectid === null) {
        this.taskNameList = [];
      }
    },
    // 获取所以标签
    async getSelectLabel() {
      const { data } = await getSelectLabel();
      this.selectLabelList = data;
    },
    // 获取评分表名称
    async getEvaluationName(id) {
      if (this.addTastDto.projectid !== null) {
        const { data } = await getEvaluationName({ id: id });
        this.evaluationName = data;
      }
      if (this.addTastDto.projectid === null) {
        this.evaluationName = {};
      }
    },
    // 获取项目迭代名称
    async getIteration(id) {
      const { data } = await getIteration({ id: id });
      this.iterationList = data;
    },
    // 获取项目模块名称
    async getModuleNameList(id) {
      const { data } = await getModuleName({ id: id });
      this.moduleNameList = data;
    },
    // 项目选择事件
    async projectClick() {
      this.addTastDto.parentid = null;
      this.addTastDto.chargeRoleid = null;
      this.addTastDto.chargeid = null;
      this.addTastDto.performidList.roleIdList = [];
      this.addTastDto.performidList.userIdList = [];
      this.addTastDto.checkedidList = [];
      this.addTastDto.copyidList = [];
      this.value11 = [];
      this.addTastDto.projectiterationid = null;
      this.addTastDto.projectmoduleid = null;
      this.chargeRoleNameList = [];
      this.hadmembers = [];
      this.reviewerNameList = [];
      this.CCNameList = [];
      this.getEvaluationName(this.addTastDto.projectid);
      this.getAllTaskNameList(parseInt(this.addTastDto.projectid));
      this.getIteration(parseInt(this.addTastDto.projectid));
      this.getModuleNameList(parseInt(this.addTastDto.projectid));
      this.getSelectAllRoleName(this.addTastDto.projectid);
      // console.log(this.addTastDto.projectid);
      const {data} = await getSelectProjectType({projectId: this.addTastDto.projectid});
      this.projectType = data;
      // console.log(this.evaluationName);
      // console.log(this.selectAllRoleName);
    },
    // 项目清除事件
    projectClearClick() {
      this.addTastDto.projectid = null;
      this.addTastDto.parentid = null;
      this.addTastDto.chargeRoleid = {
        roleId: 0,
        roleName: ''
      };
      this.value11 = [];
      this.addTastDto.projectiterationid = null;
      this.addTastDto.projectmoduleid = null;
    },
    // 点击盒子选中里面单选框
    clickInput(e) {
      e.currentTarget.lastElementChild.click();
    },
    inputClickEvent(e, item) {
      e.stopPropagation();
    },
    // 时间转换
    getUnixTime(dateStr) {
      const newstr = dateStr.replace(/-/g, '/');
      const date = new Date(newstr);
      let timeStr = date.getTime().toString();
      return timeStr.substr(0, 10);
    },
    // 时间change事件
    pickerChange() {
      if (this.getUnixTime(this.addTastDto.startdate) > this.getUnixTime(this.addTastDto.enddate)) {
        return this.$message({
          showClose: true,
          message: '开始时间不能早于结束时间！',
          type: 'warning'
        });
      }
    },
    // 新增请求
    async addTaskBtn() {
      if (this.addTastDto.name === '') {
        return this.$message({
          showClose: true,
          message: '请填写任务名字！',
          type: 'warning'
        });
      }
      if (this.addTastDto.type === null) {
        return this.$message({
          showClose: true,
          message: '请选择任务类型！',
          type: 'warning'
        });
      }
      if (this.getUnixTime(this.addTastDto.startdate) > this.getUnixTime(this.addTastDto.enddate)) {
        return this.$message({
          showClose: true,
          message: '开始时间不能早于结束时间！',
          type: 'warning'
        });
      }
      if (!this.addTastDto.parentid) {
        this.addTastDto.parentid = 0;
      }
      // if (this.addTastDto.performidList.roleIdList[0].roleName === '') {
      //   this.addTastDto.performidList.roleIdList = [];
      // }
      // console.log(this.getUnixTime(this.addTastDto.startdate));
      // console.log(this.getUnixTime(this.addTastDto.enddate));
      this.addTastDto.type = parseInt(this.addTastDto.type);
      this.addTastDto.planhours = Number(this.addTastDto.planhours);
      this.addTastDto.priority = parseInt(this.addTastDto.priority);
      if (this.addTastDto.priority > 300) {
        return this.$message({
          showClose: true,
          message: '任务等级范围在1~~300！',
          type: 'error'
        });
      }
      // 发请求
      // console.log(this.addTastDto);
      const res = await addTask(this.addTastDto);
      console.log(res);
      if (res.code === 200) {
        // 提示成功
        this.$message({
          showClose: true,
          message: '新增成功！',
          type: 'success'
        });
        // 刷新列表
        // this.reload();
        // setTimeout(() => {
        //   // this.$router.go(0);
        //   // window.location.reload();
        // }, 500);
        this.$router.push({
          name: 'Misinfo&intro',
          params: {
            index: 0,
            currentView: 'info'
          }
        });
        localStorage.setItem('taskId', res.data);
      } else {
        // 提示失败
        this.$message({
          showClose: true,
          message: '新增失败，请稍后重试！',
          type: 'error'
        });
      }
    },
    // 刷新返回列表
    goback() {
      this.reload();
      // this.$router.go(0);
      // window.location.reload();
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type="number"] {
  -moz-appearance: textfield;
}
/deep/ .upload-demo {
  height: 0;
}
.firstinfo {
  margin-top: -1px;
  background: white;
  width: 98%;
  box-shadow: 0px 1px 3px 0px rgba(153, 153, 153, 0.5),
    1px -1px 3px 0px rgba(153, 153, 153, 0.5);
  text-align: center;
  color: #333;
  padding: 20px;
  margin-bottom: 20px;
  .tit {
    font-size: 16px;
    font-weight: 400;
    color: #222;
  }
  .misLV {
    height: 24px;
    width: 80px;
    font-size: 12px;
    font-family: SukhumvitSet-Bold;
    background-color: #e8f8ec;
    text-align: center;
    line-height: 24px;
    display: inline-block;
    border-radius: 12px;
    margin-left: 15px;
    color: #fff;
  }
  .LvOne {
    background: #c5f5d1;
  }
  .LvTwo {
    background: #f7cbd2;
  }
  .LvThree {
    background: #cbd5f5;
  }
  .tags {
    height: 19px;
    margin: 10px 0 20px 0;
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    /deep/ .el-tag--info {
      background-color: #e8f8fb;
      border: none;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
  .btns {
    height: 40px;
    position: absolute;
    right: 20px;
    top: 90px;
    button {
      width: 115px;
      height: 40px;
      line-height: 40px;
      margin-right: 15px;
      font-size: 16px;
      text-align: center;
      color: #2fc0e0;
      border-radius: 5px;
      cursor: pointer;
    }
    .endmis {
      background: #e8f8fb;
      box-shadow: 0 0 3px #e8f8fb;
    }
    .delmis {
      background: #e8f8fb;
      box-shadow: 0 0 3px #e8f8fb;
    }
    .editmis {
      background: #2fc0e0;
      box-shadow: 0 0 3px #2fc0e0;
      color: white;
    }
  }
  .infotable {
    margin-bottom: 20px;
    table {
      width: 100%;
      border-left: 1px solid #f1f4ff;
      border-top: 1px solid #f1f4ff;
      tr {
        td {
          transition: all 0.3s;
          padding-left: 20px;
          height: 60px;
          text-align: left;
          border-right: 1px solid #f1f4ff;
          border-bottom: 1px solid #f1f4ff;
          #nameInput,
          #miscodeInput {
            border: none;
            outline: none;
            width: 60%;
            height: 60%;
          }
          /deep/.el-select {
            width: 70%;
            border: none;
            input {
              border: none;
            }
          }
          /deep/ .missionerSelect {
            width: 140px;
          }
          /deep/.el-date-editor--date {
            width: 60%;
            input {
              border: none;
            }
          }
          .diaheader {
            width: 100%;
            height: 55px;
            background: #f1f5ff;
            text-align: center;
            line-height: 55px;
            color: #222;
            font-weight: bold;
            font-size: 18px;
          }
          .diacontentbox {
            padding: 15px;
            // width: calc(100% - 40px);
            text-align: left;
            box-sizing: border-box;
            p {
              margin: 0 0 12px 0;
              font-size: 20px;
              color: #222;
            }
            .hadchoosenmembers {
              width: 100%;
              min-height: 80px;
              overflow-x: auto;
              display: flex;
              box-sizing: border-box;
              padding: 0 20px;
              .moremissioner {
                width: 55px;
                height: 55px;
                border-radius: 50%;
                background: #e8f8fb;
                box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
                border: 3px solid #ffffff;
                color: #2fc0e0;
                text-align: center;
                line-height: 55px;
              }
              .moremissioner1 {
                margin-top: 25px;
              }
              .choosenmem {
                position: relative;
                text-align: center;
                margin-right: 5px;
                .closeBox {
                  position: absolute;
                  top: 0;
                  right: -5px;
                  cursor: pointer;
                }
                p {
                  min-width: 70px;
                  // height: 22px;
                  margin: 0;
                  font-size: 14px;
                  color: #555;
                }
                img {
                  width: 45px;
                  height: 45px;
                  border-radius: 45px;
                }
              }
            }
          }
          .diacontentbox1 {
            padding: 0;
          }
          .searchbox {
            margin-top: 10px;
            .inputborder {
              margin: 15px auto;
              width: calc(100% - 40px);
              height: 40px;
              // background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
              border: 1px solid #ccc;
              border-radius: 25px;
              position: relative;
              .search {
                outline: none;
                width: calc(100% - 10px);
                height: 30px;
                position: relative;
                border: 2px solid transparent;
                border-radius: 25px;
                background-clip: padding-box;
                text-align: center;
              }
            }
            .icon {
              cursor: pointer;
              display: inline-block;
              width: 30px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              background-color: #2fc0e0;
              border-radius: 50%;
              color: #fff;
              position: absolute;
              right: 5px;
              top: 5px;
            }
          }
          .diacontent {
            width: 100%;
            height: 400px;
            overflow-y: auto;
            ul {
              width: 100%;
              li {
                width: calc(100% - 40px);
                padding: 0 20px;
                display: inline-block;
                border-bottom: 1px solid #f2f2f2;
                height: 60px;
                line-height: 60px;
                display: flex;
                align-items: center;
                position: relative;
                .memberName {
                  margin: 0 20px;
                  color: #222;
                  font-size: 14px;
                }
                .checkBoxs {
                  width: 25px;
                  height: 25px;
                  position: absolute;
                  right: 20px;
                }
                img {
                  width: 45px;
                  height: 45px;
                }
                div {
                  width: 100px;
                  height: 40px;
                  margin: 0 15px;
                  border-radius: 11px;
                  text-align: center;
                  line-height: 40px;
                  color: #555;
                  font-size: 14px;
                }
                .firstBox {
                  width: 70%;
                  height: 70px;
                  line-height: 70px;
                  display: flex;
                  align-items: center;
                }
                .first {
                  background: #ffd167;
                  color: #fff;
                }
              }
              li:hover {
                background: rgb(219, 219, 219);
              }
            }
          }
          input {
            border: none;
            width: 75%;
            height: 80%;
            outline: none;
            transition: all 0.3s;
            border-radius: 5px;
          }
          select {
            border: none;
            width: 75%;
            height: 80%;
            outline: none;
            transition: all 0.3s;
            border-radius: 5px;
          }
          .choosemember {
            cursor: pointer;
            width: 40px;
            height: 40px;
            vertical-align: middle;
          }
          .choosemember1 {
            margin-right: 170px;
          }
          .missioner {
            display: flex;
            align-items: center;
            .editspan {
              margin: 0 10px;
              width: 110px;
              height: 31px;
              padding-left: 2px;
              background: #e8f8fb;
              border-radius: 4px;
              color: #2fc0e0;
              text-align: center;
            }
            .missionerinfo {
              display: inline-block;
              text-align: center;
              p {
                margin: 0;
                color: #555;
              }
              img {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                box-shadow: 1px 1px 3px #d7d7d7;
              }
            }
            .moremissioner {
              width: 55px;
              height: 55px;
              border-radius: 50%;
              background: #e8f8fb;
              box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
              border: 3px solid #ffffff;
              color: #2fc0e0;
              text-align: center;
              line-height: 55px;
            }
            .moremissioner1 {
              margin-top: 25px;
            }
            img {
              width: 45px;
              height: 45px;
              margin: 0 10px;
              border-radius: 50%;
            }
            .choosemember {
              cursor: pointer;
              width: 40px;
              height: 40px;
            }
          }
          .domany {
            border: none;
            width: 120px;
            height: 16px;
            margin: 0 10px;
          }
          .manystatus {
            display: inline-block;
            color: #555;
            font-size: 14px;
          }
          .manystatus::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #555;
            box-shadow: 0 0 3px #555;
          }
          .tagChangeBox {
            /deep/ .el-input__suffix {
              display: none;
            }
          }
        }
        td {
          box-sizing: border-box;
          font-size: 12px;
        }
        td:focus-within {
          box-shadow: inset 0px 1px 4px 0px #2fc0e0,
            inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
            inset -1px 0px 4px 0px #2fc0e0;
        }
        // input:focus {
        //   box-shadow: inset 0px 1px 4px 0px #2fc0e0,
        //     inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
        //     inset -1px 0px 4px 0px #2fc0e0;
        // }
      }
    }
  }
  /deep/.el-dialog__wrapper {
    text-align: center;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
    }
  }
  /deep/ .el-progress-bar__outer {
    width: 120px;
    height: 20px !important;
    line-height: 20px;
  }
  /deep/ .el-progress-bar__inner {
    height: 100%;
    line-height: 16px;
    background-color: #c7e9f0;
  }
}

// /deep/ .el-tag__close {
//   display: none;
// }
/deep/ .el-textarea__inner {
  width: 100%;
  height: 100%;
  border: none;
}
/deep/ .el-input__count {
  right: 20px;
  bottom: 20px;
}
.common-intro {
  margin-top: -1px;
  width: 98%;
  text-align: center;
  margin-top: 32px;
  background: white;
  .tit {
    font-size: 16px;
    font-weight: 400;
    color: #333;
  }
  .discreaption {
    text-align: left;
    position: relative;
    margin-bottom: 32px;
    .distit {
      font-size: 16px;
    }
    .disbox {
      width: 100%;
      height: 168px;
      padding: 20px;
      font-size: 14px;
      color: #555;
      font-weight: 400;
      border: 1px solid #f1f4ff;
      outline: none;
    }
    .disbox:focus {
      box-shadow: inset 0px 1px 4px 0px #2fc0e0, inset 0px -1px 4px 0px #2fc0e0,
        inset 1px 0px 4px 0px #2fc0e0, inset -1px 0px 4px 0px #2fc0e0;
    }
    .plus {
      width: 30px;
      height: 30px;
      padding: 0;
      line-height: 30px;
      text-align: center;
      border-radius: 15px;
      background-color: #e8f8fb;
      font-size: 36px;
      color: #2fc0e0;
      cursor: pointer;
      position: absolute;
      left: 80px;
      top: -5px;
    }
    .filelist {
      display: flex;
      .file {
        display: flex;
        width: 315px;
        margin-right: 71px;
        padding-top: 10px;
        height: 84px;
        box-sizing: border-box;
        background-color: #fff;
        border: 1px solid #e6ebff;
        border-radius: 8px;
        img {
          width: 48px;
          height: 48px;
          margin: 8px;
        }
        .fileinfo {
          display: flex;
          p {
            width: 150px;
            font-size: 16px;
            color: #333;
            margin: 10px;
            margin-right: 20px;
            overflow: hidden;
          }
          .downbtn {
            img {
              width: 36px;
              height: 36px;
              border-radius: 50%;
              margin: 17px 9px;
            }
          }
        }
      }
    }
  }
}
input::-webkit-input-placeholder {
  color: #ccc;
}
</style>
